<template>
    <div class="shop">
      <el-button-group>
        <el-button @click="changeStatus(1)">全部</el-button>
        <el-button @click="changeStatus(2)">已上架</el-button>
        <el-button @click="changeStatus(3)">已下架</el-button>
      </el-button-group>
  
      <div class="search">
        <div class="search_btn">
          <el-input class="input" v-model="form.keywords" placeholder="输入商品或小店名称搜索" clearable></el-input>
          <el-button type="primary" @click="searchShopMin">搜索</el-button>
        </div>
      </div>
  
      <el-table
        :data="tableData"
        style="width:100%"
        max-height="680"
        class="shop_table_list"
        :cell-style="tc"
        :header-cell-style="tccolor"
      >
        <el-table-column prop="shop_id" label="ID" ></el-table-column>
        <el-table-column label="图片"  width ="160">
          <template slot-scope="scope">
            <div>
              <img
                :key="scope.row.id"
                style="width:100px;"
                :src="scope.row.pic_url ? scope.row.pic_url : errorImg"
                alt
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column  label="名称">
          <template slot-scope="scope">
            <p class="shop_title">{{scope.row.title}}</p>
            <!-- <p>{{scope.row.description}}</p> -->
          </template>
        </el-table-column>
        <el-table-column prop="shop_name" label="所属小店" ></el-table-column>
        <el-table-column prop="price" label="商品售价" ></el-table-column>
        <el-table-column prop="num" label="总库存/冻结数" >
          <template slot-scope="scope">{{scope.row.stock}}/{{scope.row.stock-scope.row.usable_stock}}</template>
        </el-table-column>
        <el-table-column label="上架状态" >
          <template slot-scope="scope">
            <el-switch
              :key="scope.row.id"
              :active-value="5"
              :inactive-value="15"
              :value="scope.row.on_sale"
              @change="isUseActivityChange(scope.row.id,$event)"
            ></el-switch>
            <p class="status—desc" v-if="scope.row.on_sale==1">审核中</p>
            <p class="status—desc" v-if="scope.row.on_sale==5">售卖中</p>
            <p class="status—desc" v-if="scope.row.on_sale==10">驳回</p>
            <p class="status—desc" v-if="scope.row.on_sale==15">已下架</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="160" >
          <template slot-scope="scope">
            <el-button size="mini" @click="openShopMinDetail(scope.row.id)">查看</el-button>
            <el-button size="mini" type="danger" @click="deleteShopMin(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <el-col :span="24">
        <div class="pagination">
          <el-pagination
            background
            @current-change="pageChange"
            :current-page="form.page"
            :page-size="15"
            layout="total, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-col>
  
    <jdialog
        title="商品信息"
        :visible.sync="isShowDetail"
        width="600px">
        <el-row class="shop_info_dalog">
          <el-col :span="3">商品图片:</el-col>
          <el-col :span="21">
            <uploadImg
              flieName="shopadministration_pic_list"
              :n="10"
              :oldImgs="img_url"
              @getFile="getFile"
            ></uploadImg>
            <div class="img_main" v-show="img_url.length">主图</div>
          </el-col>
        </el-row>
        <el-row class="shop_info_dalog">
          <el-col :span="3">商品名称:</el-col>
          <el-col :span="8">
            <el-input placeholder v-model="productDetail.title"></el-input>
          </el-col>
        </el-row>
  
        <el-row class="shop_info_dalog">
          <el-col :span="3">商品原价:</el-col>
          <el-col :span="8">
            <el-input-number
              v-model="productDetail.price"
              @change="changeGoodsPrice"
              :min="0"
  
            ></el-input-number>
          </el-col>
        </el-row>
  
        <el-row class="shop_info_dalog">
          <el-col :span="3">商品库存:</el-col>
          <el-col :span="8">
            <el-input-number
              v-model="productDetail.stock"
              @change="changeGoodsStock"
              :min="1"
  
            ></el-input-number>
          </el-col>
        </el-row>
  
        <el-row class="shop_info_dalog">
          <el-col :span="3">商品简介:</el-col>
          <el-col :span="8">
            <el-input placeholder v-model="productDetail.description" type="textarea" auotosize></el-input>
          </el-col>
        </el-row>
  
        <div  class="dialog-footer">
          <el-button size='mini' @click="isShowDetail = false">取 消</el-button>
          <el-button size='mini' type="primary" @click="submitGoodsInfo">确 定</el-button>
        </div>
      </jdialog>
  
    </div>
  </template>
  
  <script>
  // import errorImg from "@/assets/images/error_img.png";
  // import uploadImg from "@/components/uploadImg";
  // import {
  //   getProductList,
  //   productDownProduct,
  //   productUpProduct,
  //   productDeleteProduct,
  //   productDetailInfo,
  //   productEditProduct,
  // } from "@/api/goods";
  
  // import shopadministrationdetail from './shopadministrationdetail'
  export default {
    components: {
      // uploadImg
    },
    mounted() {
      this.getProductListData();
    },
    data() {
      return {
        //展示详情
        isShowDetail: false,
        errorImg,
        form: {
          keywords: "",
          on_sale: "",
          page: 1
        },
        total: 0,
        tableData: [],
        //商品详情
        productDetail: {},
        //图片列表
        img_url: []
      };
    },
    methods: {
      tc() {
        return "text-align:center; color:#333333; font-size:12px;";
      },
      tccolor() {
        return "text-align:center;background-color:#f5f5f5; font-size:14px;";
      },
      changeStatus(e) {
        if (e === 1) {
          this.form.on_sale = "";
        } else if (e === 2) {
          this.form.on_sale = "5";
        } else {
          this.form.on_sale = "15";
        }
        //重新获取小店商品管理列表
        this.getProductListData();
      },
      //获取商品列表
      async getProductListData() {
        var url =
          "keywords=" +
          this.form.keywords +
          "&on_sale=" +
          this.form.on_sale +
          "&page=" +
          this.form.page;
        let res = await getProductList(url);
        this.tableData = res.data.data;
        this.total = res.data.total;
      },
      //根据关键词重新获取小店
      searchShopMin() {
        this.getProductListData();
      },
      pageChange(page) {
        this.form.page = page;
        this.getProductListData();
      },
  
      isUseActivityChange(id, e) {
        if (e === 15) {
          //下架
          this.getDownProductData(id);
        } else {
          //上架
          this.getUpProductData(id);
        }
      },
      //上架商品
      async getUpProductData(cid) {
        let res = await productUpProduct({ id: cid });
        if (res.code === 10000) {
          this.$message.success("上架商品成功");
          this.getProductListData();
        } else {
          this.$message.error(res.message);
        }
      },
      //下架商品
      async getDownProductData(cid) {
        let res = await productDownProduct({ id: cid });
        if (res.code === 10000) {
          this.$message.success("下架商品成功");
          this.getProductListData();
        } else {
          this.$message.error(res.message);
        }
      },
  
      //删除商品
      async getDeleteProductData(cid) {
        let res = await productDeleteProduct({ id: cid });
        if (res.code === 10000) {
          this.$message.success("删除商品成功");
          this.getProductListData();
        } else {
          this.$message.error(res.message);
        }
      },
      //查看详情
      openShopMinDetail(id) {
        this.isShowDetail = true;
        this.getProductDetailInfoData(id);
      },
  
      //删除详情
      deleteShopMin(id) {
        this.$confirm('确认删除该商品', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
           this.getDeleteProductData(id);
        }).catch(() => {
          console.log('cancel')
        });
  
      },
  
      //商品详情
      async getProductDetailInfoData(cid) {
        let res = await productDetailInfo("id=" + cid);
        console.log(res);
        this.productDetail = res.data;
        this.img_url = res.data.pic_list ? res.data.pic_list.map(obj=>obj.product_pic_url) : []
          console.log(this.img_url)
      },
      //获取商品图片
      getFile(file) {
        if (file.files && file.files.length && file.name == 'shopadministration_pic_list') {
          this.img_url = file.files.map(obj=>obj.url)
        }
      },
      //改变商品原价
      changeGoodsPrice() {},
  
      //改变商品库存
      changeGoodsStock() {},
  
      //修改商品点击确定
      submitGoodsInfo() {
        this.getEditProductData();
      },
  
      //编辑商品
      async getEditProductData() {
        var form = {
          id: this.productDetail.id,
          title: this.productDetail.title,
          description: this.productDetail.description,
          price: this.productDetail.price,
          stock: this.productDetail.stock,
          pic_url: JSON.stringify([...this.img_url])
        };
        console.log(form);
        let res = await productEditProduct(form);
        if (res.code === 10000) {
          this.$message.success("编辑成功");
          this.getProductListData();
        } else {
          this.$message.error(res.message);
        }
        this.isShowDetail = false;
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .shop {
    padding: 20px;
    position: relative;
  
    .search {
      float: right;
      .input {
        width: 200px;
      }
    }
    .shop_table_list{
      margin-top:20px;
    }
    .shop_title {
      font-weight: 700;
    }
  
  
    .pagination {
      float: right;
    }
    .status—desc {
      display: inline;
      margin-left: 5px;
    }
  
    .img_main {
      color: #ffffff;
      background-color: #f4222d;
      width: 60px;
      text-align: center;
      position: absolute;
      top: 0;
      left: 10%;
      margin-left: 30px;
      // z-index: !important;
    }
    .shop_info_dalog{
      margin-top: 20px;
      padding:  0 20px;
    }
    .dialog-footer{
      margin: 20px 0;
      text-align: center;
    }
  }
  </style>
  